<template>
  <div class="examinationDetail-wrapper">
    <div class="topbar">在线考试</div>
    <div class="examinationTitle-wrapper">
      <span class="examinationTitle">安规基础专业考试</span> <br />
      <span>考试时间：{{ examinationTime }}</span>
      <span class="paddingLeft">考试时长：{{ duration }}</span>
      <div class="times">{{ `${h}: ${m}: ${s}` }}</div>
    </div>
    <div class="examinationContent-wrapper">
      <div class="questionsSingle">
        <div>
          <h3>
            一、 单选题( 每题 {{ examinationSingle.subjectScore }}分, 共
            {{ examinationSingle.anumberA }}题 )
          </h3>
        </div>
        <div>
          <ol>
            <li
              v-for="(item, index) in examinationSingle.trainSubjectList"
              :key="index"
              :label="item.subjectId"
            >
              <p :label="item.subjectId">{{ item.subjectContent }}</p>
              <el-radio-group v-model="singleArr[index]">
                <el-radio
                  v-for="(each, i) in item.subjectOption"
                  :key="i"
                  :label="each"
                  @change="singleChange"
                >
                  {{ each.subjectOption }}
                </el-radio>
              </el-radio-group>
            </li>
          </ol>
        </div>
      </div>
      <!-- 判断 -->
      <div class="questionsJudge">
        <div>
          <h3>
            二、 判断题( 每题 {{ examinationJudge.subjectScore }}分, 共
            {{ examinationSingle.anumberA }}题 )
          </h3>
        </div>
        <div>
          <ol>
            <li v-for="(item, index) in judgeSubject" :key="item.index">
              <p>{{ item.subjectContent }}</p>
              <el-radio-group v-model="judgeArr[index]" @change="judgeChange">
                <el-radio
                  v-for="(each, i) in item.subjectOption"
                  :key="i"
                  :label="each"
                  >{{ each.subjectOption }}
                </el-radio>
              </el-radio-group>
            </li>
          </ol>
        </div>
      </div>
      <!-- 多选 -->
      <div class="questionsMultiple">
        <div>
          <h3>
            三、 多选题( 每题 {{ examinationMultiple.subjectScore }}分, 共
            {{ examinationSingle.anumberA }}题 )
          </h3>
        </div>
        <div>
          <ol>
            <li v-for="(item, index) in multipleSubject" :key="index">
              <p>{{ item.subjectContent }}</p>
              <el-checkbox-group v-model="multipleArr">
                <el-checkbox
                  v-for="(each, i) in item.subjectOption"
                  :key="i"
                  :label="each"
                  @change="multipleChange"
                >
                  {{ each.subjectOption }}
                </el-checkbox>
              </el-checkbox-group>
            </li>
          </ol>
        </div>
      </div>
    </div>
    <span class="businessButtonConfirm" @click="close">提交答卷</span>
  </div>
</template>

<script>
import { paperOnline } from "@/business/api/examination";

export default {
  data() {
    return {
      examinationTime: "2020-04-27 13:00:00 ~ 2020-04-27 15:00:00", // 考试开始~结束时间
      // 倒计时
      duration: 120, // 分
      times: 7200, // 秒
      timer: null,
      count: "1",
      h: "02",
      m: "00",
      s: "00",
      formateTime: "1小时59分59秒",
      // 生成试卷
      specializedPaper: "1234", // 考试id
      specializedMajor: "1025007", // 专业id

      examinationSingle: [], // 单选 subjectType: 1041001
      // singleSubject: [], // 单选 题目
      // singleOption: [], // 单选 选项

      examinationMultiple: [], // 多选 subjectType: 1041002
      multipleSubject: [], // 多选 题目
      // multipleOption: [], // 多选 选项

      examinationJudge: [], // 判断 subjectType: 1041003
      judgeSubject: [], // 判断 题目
      // judgeOption: [], // 判断 选项

      examinationType: {
        1041001: "单选题",
        1041002: "多选题",
        1041003: "判断题",
      },
      answerList: [],

      singleArr: [],
      // songleData: [],
      judgeArr: [],
      multipleArr: [],
    };
  },
  created() {
    paperOnline({
      paperCode: this.specializedPaper,
      specialty: this.specializedMajor,
    }).then((res) => {
      if (res.success) {
        const examinationTotal = res.info;
        console.log(examinationTotal);
        for (let index = 0; index < examinationTotal.length; index++) {
          // console.log(examinationTotal[index].subjectType);
          if (examinationTotal[index].subjectType == 1041001) {
            // let single = [];
            this.examinationSingle = examinationTotal[index];
            this.singleSubject = examinationTotal[index].trainSubjectList;

            console.log(this.examinationSingle);
            console.log(this.singleSubject);
          } else if (examinationTotal[index].subjectType == 1041002) {
            this.examinationMultiple = examinationTotal[index];
            this.multipleSubject = examinationTotal[index].trainSubjectList;
            // console.log(this.examinationMultiple);
          } else if (examinationTotal[index].subjectType == 1041003) {
            this.examinationJudge = examinationTotal[index];
            this.judgeSubject = examinationTotal[index].trainSubjectList;
            // console.log(this.examinationJudge);
          }
        }
      }
    });
  },
  mounted() {
    this.countTime();
  },
  methods: {
    singleChange() {
      console.log(this.singleArr);
      this.singleArr.map((item, index) => {
        // console.log(item,index);
      });
    },
    judgeChange() {
      console.log(this.judgeArr);
    },
    multipleChange() {
      console.log(this.multipleArr);
    },
    // 时间倒计时
    countTime() {
      const time = this.duration * 60;
      // console.log(time);
      // const time = 3;
      if (!this.timer) {
        this.count = time;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= time) {
            // debugger
            this.count--;
            const h = parseInt(this.count / (60 * 60));
            const m = parseInt((this.count / 60) % 60);
            const s = parseInt(this.count % 60);
            if (h === 0 && m === 0 && s === 0) {
              this.$message("答题时间结束，将自动交卷！");
              this.h = "00";
              this.m = "00";
              this.s = "00";
            } else {
              this.h = h > 9 ? h : "0" + h;
              this.m = m > 9 ? m : "0" + m;
              this.s = s > 9 ? s : "0" + s;
            }
          } else {
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },

    close() {
      let single = this.examinationSingle;
      let option = this.singleArr;
      let array = [];
      // console.log( option.length);
      // debugger
      for (let i = 0; i < single.trainSubjectList.length; i++) {
        single.trainSubjectList[i].subjectOption.map((item) => {
          // console.log(item );
          for (let j = 0; j < option.length; j++) {
            // console.log(option[j]);
            if (option[j] == item) {
              single.trainSubjectList[i].subjectOption.length = 0;
              single.trainSubjectList[i].subjectOption.push(option[j]);
              console.log(single.trainSubjectList[i].subjectOption);
              return single.trainSubjectList[i].subjectOption;
            }
          }
        });
      }

      this.messageBox("提交答卷后不可再考，确认提交？").then((c) => {
        if (c.action) {
          this.$emit("close");
        } else return;
      });
    },

    countTimeFun() {},
    numToChinese(num) {
      if (!/^\d*(\.\d*)?$/.test(num)) {
        alert("Number is wrong!");
        return "Number is wrong!";
      }
      var AA = new Array(
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九"
      );
      var BB = new Array("", "十", "百", "千", "万", "亿", "点", "");
      var a = ("" + num).replace(/(^0*)/g, "").split("."),
        k = 0,
        re = "";
      for (var i = a[0].length - 1; i >= 0; i--) {
        switch (k) {
          case 0:
            re = BB[7] + re;
            break;
          case 4:
            if (
              !new RegExp("0{4}\\d{" + (a[0].length - i - 1) + "}$").test(a[0])
            )
              re = BB[4] + re;
            break;
          case 8:
            re = BB[5] + re;
            BB[7] = BB[5];
            k = 0;
            break;
        }
        if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
          re = AA[0] + re;
        if (a[0].charAt(i) != 0) re = AA[a[0].charAt(i)] + BB[k % 4] + re;
        k++;
      }
      if (a.length > 1) {
        //加上小数部分(如果有小数部分)
        re += BB[6];
        for (var i = 0; i < a[1].length; i++) re += AA[a[1].charAt(i)];
      }
      return re;
    },
  },
};
</script>

<style lang="scss" scoped>
.examinationDetail-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  background-color: #fff;
  width: 100%;
  height: 100%;

  .topbar {
    background-color: #0d59d6;
    padding: 12px 0;
    padding-left: 16px;
    color: #fff;
  }

  .examinationTitle-wrapper {
    position: relative;
    padding: 30px 0;

    .paddingLeft {
      display: inline-block;
      padding-left: 20px;
    }

    .times {
      width: 180px;
      height: 60px;
      line-height: 60px;
      background-color: #f2f2f2;
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .examinationContent-wrapper {
    height: calc(100% - 227px);
    overflow: auto;
    text-align: left;
    padding-left: 20px;

    .examinationItem {
      margin: 30px 0;

      div {
        margin-top: 8px;
        padding-left: 15px;
      }
    }
    h3 {
      margin-left: 20px;
    }

    ol,
    ol li {
      margin: 8px 0 8px 40px;

      .el-radio {
        display: block;
        margin: 8px 0 8px 40px;
      }
      .el-checkbox {
        display: block;
        margin: 8px 0 8px 40px;
      }
    }
  }

  .businessButtonConfirm {
    // float: right;
    margin-top: 50px;
    margin: auto;
  }
}
</style>
